<template>
  <!-- {{ alarmlist }} -->
  <div>
    <div class="searcharea" slot="head">
      <label class="search-item">
        <el-input
          id="search"
          placeholder="Search"
          prefix-icon="el-icon-search"
          v-model="searchkey"
          @keyup.native="filterAlarm"
          @keyup.enter.native="searchAlarm"
        >
        </el-input>
      </label>
      <el-button
        class="search-item"
        type="primary"
        size="small"
        icon="el-icon-search"
        style="width: 90px"
        >Search
      </el-button>
      <el-button
        class="search-item"
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        style="width: 70px"
        @click="showAddForm(true)"
        >Add
      </el-button>

      <el-select
        v-model="statusOptionValue"
        clearable
        placeholder="Status"
        style="width: 80px"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-table
      slot="down"
      :data="alarmlist"
      height="500px"
      border
      style="width: 100%"
    >
      <el-table-column prop="name" label="name"> </el-table-column>
      <el-table-column prop="gentime" label="gentime" width="140">
        <div slot-scope="scope">{{ scope.row.gentime | formatTime }}</div>
      </el-table-column>
      <el-table-column prop="status" label="status" width="80">
      </el-table-column>
      <el-table-column prop="srouce" label="srouce" width="80">
      </el-table-column>
      <el-table-column prop="handleby" label="handleby" width="100">
      </el-table-column>
      <el-table-column prop="progress" label="progress"> </el-table-column>
      <el-table-column prop="record" label="record"> </el-table-column>
      <el-table-column label="Operation" width="100">
        <template slot-scope="scope">
          <i @click="clickEditRow(scope.row)" class="el-icon-edit"></i>
          <i
            @click="deleteRow(scope.$index, alarmlist)"
            class="el-icon-delete"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <editForm
      v-if="EditForm_dialog_visible"
      :formVisible="EditForm_dialog_visible"
      @formVisibleEvent="showEditForm"
      :formData="formData"
    >
    </editForm>
    <AddAlarmRecord
      v-if="dialog_visible"
      :dialog_visible="dialog_visible"
      @dialogVisibleEvent="showAddForm"
    ></AddAlarmRecord>
  </div>
</template>

<script>
import { fetchAlarmHis, removeRecord } from "@/api/alarm.js";
// import editForm from "@/components/Alarm/AlarmForm.vue";
import editForm from "@/components/Alarm/EditAlarmRecord.vue";
import AddAlarmRecord from "@/components/Alarm/AddAlarmRecord.vue";

export default {
  name: "AlarmRecord",
  data() {
    let list = [];
    return {
      dialog_visible: false,
      EditForm_dialog_visible: false,
      statusOptionValue: this.$store.state.statusOptionValue,
      alarmlist: this.$store.state.alarmRecordList,
      alarListForSave: this.$store.state.alarmRecordListSave, // use for alarm filter
      // isAddFormShow: false,
      searchkey: "",
      statusOptions: this.$store.state.statusOptionValue,
      formData: {},
    };
  },
  components: {
    AddAlarmRecord,
    editForm,
  },
  created() {
    fetchAlarmHis().then((response) => {
      this.alarmlist = response.data;
      // console.log("this.alarmlist :>> ", this.alarmlist);
      // console.log(" response :>> ", response);
    });
  },
  filters: {
    formatTime(value) {
      // console.log(value);
      let newTime =
        value.substr(0, 4) +
        "/" +
        value.substr(5, 2) +
        "/" +
        value.substr(8, 2) +
        " " +
        value.substr(11, 2) +
        ":" +
        value.substr(14, 2);
      return newTime;
    },
  },
  watch: {
    alarmlist(val) {
      // console.log(" alarmlist new val :>> ", val);
      this.$store.state.alarmRecordList = val;
    },
  },
  methods: {
    showEditForm(visible) {
      this.EditForm_dialog_visible = visible;
    },
    showAddForm(visible) {
      this.dialog_visible = visible;
      // console.log("dialog_visible :>> ", this.dialog_visible);
    },

    deleteRow(index, rows) {
      // console.log("rows :>> ", rows);
      // console.log("index :>> ", index);
      // console.log("rows[index].alarmid :>> ", rows[index].alarmid);
      let r = confirm("Confirm to remove the record?");
      if (r == true) {
        removeRecord(rows[index].alarmid)
          .then((response) => {
            rows.splice(index, 1);
            // update the alarm list in store
            this.$store.state.alarmRecordListSave = rows;
            this.$store.state.alarmRecordList = rows;
            this.$notify({
              title: "Success",
              message: "Record remove success!",
              type: "success",
              duration: 4,
            });
          })
          .catch((err) => {
            this.$notify.error({
              title: "Error",
              message: "Record remove failed!",
            });
          });
      }
    },
    clickEditRow(row) {
      this.showEditForm(true);
      this.formData = row;
      // console.log("row :>> ", row);
      // console.log("this.formData :>> ", this.formData);
    },
    searchAlarm() {
      console.log("start search alarm");
    },
    filterAlarm() {
      // let this = this;
      if (this.alarListForSave.length == 0) {
        //数组复制方法
        this.alarListForSave = this.alarmlist.slice(0);
      } else {
        this.alarmlist = this.alarListForSave.slice(0);
      }
      for (let index = 0; index < this.alarmlist.length; index++) {
        let str = JSON.stringify(this.alarmlist[index]);
        if (str.indexOf(this.searchkey) === -1) {
          // console.log(str);
          this.alarmlist.splice(index, 1);
          index = index - 1;
        }
      }
    },
  },
};
</script>

<style>
.searcharea {
  display: flex;
}

.test {
  text-align: center;
}
</style>